<template>
  <div>
    <el-dialog title="详细信息" :visible.sync="isshow" width="800px" @close="close">
      <div>
        <div v-html="questionMsg.title"></div>
        <div class="search_bar">
          <div class="search">
            <span style="width: 100px;line-height: 30px;font-weight: bold;">答案文本</span>
            <el-input
          v-input-restrict
              v-model="searchForm.answerContent"
              placeholder="请输入要搜索的答案"
              class="searchbox"
            ></el-input>

            <el-button type="primary" class="searchbtn" @click="searchBytip"
              >搜索</el-button
            >
          </div>
          <div class="fifter">
            <el-checkbox
              v-model="searchForm.filterEmptyFlag"
              :true-label="1"
              :false-label="0"
              >过滤空选项</el-checkbox
            >
          </div>
        </div>
        <div ref="printquestionMsg">
          <el-table :data="options" style="width: 100%; margin-top: 20px">
            <el-table-column
              type="index"
              label="序号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="submitTime"
              label="提交答卷时间"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="answerContent" label="答案文本">
              <template slot-scope="scope">
                 <div v-if="scope.row.answerContent!=null&&scope.row.answerContent.indexOf(']')!=-1">
                  <template v-for="e of JSON.parse(scope.row.answerContent)">
                    {{ e }}
                  </template>
                </div>
                <div v-else>
                  {{ scope.row.answerContent }}
                </div>
              </template>
               </el-table-column>
            <el-table-column label="查看答卷">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="lookmsg(scope.row.surveyUserId, scope.$index)"
                  >查看答卷</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.pageNum"
          :limit.sync="searchForm.pageSize"
          @pagination="getList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printquestionMsg">打印</el-button>
        <el-button type="primary" @click="loadSurvey">下载</el-button>
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 详细信息弹框 -->
    <Answerbox ref="answerbox"></Answerbox>
  </div>
</template>

<script>
import { getAnswerlist, exportinput } from "../../../api/questions/statistics";
import Answerbox from "./answerMsg.vue";
export default {
  name: "MixedStateAdminQuestionMsg",
  components: {
    Answerbox,
  },
  data() {
    return {
      isshow: false,
      questionMsg: {
        title: "一条问题标题",
        options: [
          
        ],
      },
      searchForm: {
        id: "",
        filterEmptyFlag: 0,
        answerContent: "",
        idType: "",
        pageNum: 1,
        pageSize: 10,
        questionNo:""
      },
      total: 0,
      options: [],
    };
  },

  mounted() {},

  methods: {
    show(row, idType,index) {
      this.searchForm.id = row.id;
      this.searchForm.idType = idType;
      this.searchForm.questionNo = index;
      this.questionMsg.title =
        row.optionName ||
        row.questionName.replace(/<p\b[^>]*>(.*?)<\/p>/gi, "$1");
      // 获取题目id查询题目回答详情
      this.getList();
      this.isshow = true;
    },
    lookmsg(id, index) {
      this.$refs.answerbox.show(id, index);
    },
    getList() {
      // 使用获取后端数据
      getAnswerlist(this.searchForm).then((res) => {
        this.total = res.total;
        //TODO: 给页面表格数据赋值
        this.options = res.rows;
      });
    },
    searchBytip() {
      this.getList();
    },
    // 问卷详情打印
    printquestionMsg() {
      this.$html2canvas(this.$refs.printquestionMsg, {
        backgroundColor: "white",
        useCORS: true,
        foreignObjectRendering: false,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
      }).then((canvas) => {
        const url = canvas.toDataURL();
        this.img = url;
        this.$print({
          printable: url,
          type: "image",
          documentTitle: "--",
          base64: "true",
        });
      });
    },
    // 问卷填空下载
    // 问卷下载
    loadSurvey() {
      exportinput(this.searchForm).then((res) => {
          const blob = new Blob([res], { type: "" });
          let fileName = "问卷统计.xlsx";
          if ("download" in document.createElement("a")) {
            const link = document.createElement("a");
            link.download = fileName;
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
          } else {
            navigator.msSaveBlob(blob.fileName);
          }
       
      });
    },
    close(){
      this.isshow=false;
     this. searchForm= {
        id: "",
        filterEmptyFlag: 0,
        answerContent: "",
        idType: "",
        pageNum: 1,
        pageSize: 10,
        questionNo:""
      }

    }
  },
};
</script>

<style lang="scss" scoped>
.search_bar {
  margin-top: 20px;
  background-color: #fafafa;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.search {
  display: flex;
}
.searchbtn {
  height: 30px;
  line-height: 10px;
  margin-left: 20px;
}
.searchbox ::v-deep .el-input__inner {
  height: 30px;
}
.fifter {
  display: flex;
  align-items: center;
  
}
</style>